<template>
  <div class="page">
    <m-header :title="langText&&langText.fgpassword" :canback="Boolean(1)"></m-header>
    <section class="body">
      <form class="tj-form">
        <div class="form-item">
          <label for="name">{{langText&&langText.mail}}</label>
          <input
            type="text"
            :placeholder="langText&&langText.peten"
            v-model="formData.email"
            @blur="confirmE($event)"
          />
          <!-- <input type="number" placeholder="请输入手机号" v-model="formData.mobile" @blur="IsMobilePhoneNumber($event)" oninput="if(value.length>11)value=value.slice(0,11)">
          <span class="error" v-show="!rule.isMobile.validate"><i class="iconfont iconerror1">{{rule.isMobile.msg}}</i></span>-->
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.newpassword}}</label>
          <input
            type="password"
            :placeholder="langText&&langText.pnpassword"
            v-model="formData.newpassword"
            @blur="IsIntegerAndEnglishCharacter($event)"
          />
          <!-- <span class="error" v-show="!rule.isPwd.validate">
            <i class="iconfont iconerror1">{{rule.isPwd.msg}}</i>
          </span>-->
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.confirmpassword}}</label>
          <input
            type="password"
            :placeholder="langText&&langText.pcpassword"
            v-model="password"
            @blur="confirmL($event)"
          />
          <!-- <span class="error" v-show="!rule.conFirmL.validate">
            <i class="iconfont iconerror1">{{rule.conFirmL.msg}}</i>
          </span>-->
        </div>
        <!-- <div class="form-item">
          <label for="name">{{langText&&langText.yzcode}}</label>
          <div class="item-flex code">
            <input
              type="number"
              :placeholder="langText&&langText.pevc"
              v-model="formData.captcha"
              oninput="if(value.length>4)value=value.slice(0,4)"
            />
            <button
              type="button"
              class="btn btn-origin"
              :disabled="seconds>0"
              @click="getCode"
            >{{seconds==0?langText&&langText.sendcode:"("+seconds+"s)"}}</button>
          </div>
        </div> -->
        <!-- <button type="button" class="btn-submit btn-origin" @click="confirm">{{langText&&langText.mail}}{{customer.submit}}</button> -->
        <button type="button" class="btn-submit btn-origin" @click="confirm">{{langText&&langText.change}}</button>
      </form>
    </section>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Init, Base } from "@/server/server.js";
import { Util, Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";

export default {
  components: {},
  data() {
    return {
      allTxt:null,
      seconds: 0,
      formData: {
        email: null,
        newpassword: null,
        captcha: 8888
      },
      password: null,
      rule: {
        // isMobile: {
        //   validate: true,
        //   msg: "请输入正确的手机号"
        // },
        conFirmE: {
          validate: true,
          msg: "请输入正确的邮箱账号"
        },
        isPwd: {
          validate: true,
          msg: "密码应为6-12位字母+数字"
        },
        conFirmL: {
          validate: true,
          msg: "两次输入密码不一致！"
        }
      },
      customer:{},
      UserInfo:{},
      langText:null,
    };
  },
  created () {
    this.customer = this.lang.customer;
    this.UserInfo = this.lang.UserInfo;
  },
  computed: {
    ...mapGetters(["lang",'getLangId'])
  },
  mounted(){
    this.getlang();
    this.initData();
  },
  methods: {
    initData(){
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      
      this.rule.conFirmE.msg = this.langText&&this.langText.ptcea;
      this.rule.isPwd.msg = this.langText&&this.langText.prule;
      this.rule.conFirmL.msg = this.langText&&this.langText.iipt;
    },
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.login,res.data.mine,res.data.prompt);
        }else{
          mui.toast(res.msg)
        }
      })
    },
    getCode() {
      if (!this.rule.conFirmE.validate) {
        mui.toast("请输入正确的邮箱账号！");
        return;
      }
      this.seconds = 60;
      let get = setInterval(() => {
        this.$nextTick(() => {
          this.seconds = this.seconds - 1;
          if (this.seconds <= 0) {
            clearInterval(get);
          }
        });
      }, 1000);
      // return ;
      // 发送验证码
      Init.send({ email: this.formData.email, event: "changepwd" }).then(
        res => {
          if (res.code == 1) {
            mui.toast(res.msg);
          } else {
            mui.toast(res.msg);
          }
        }
      );
    },
    confirm() {
      let _This = this;
      let msg = Util.isValidate(_This.formData, _This.rule);
      if (msg) {
        mui.toast(msg);
        return;
      } else if (!this.rule.conFirmE.validate) {
        mui.toast(mui.toast(this.rule.conFirmE.msg));
        return;
      }
      Load.loadStart(this);
      Init.resetpwd(_This.formData).then(res => {
        if (res.code == 1) {
          mui.toast(res.msg);
          setTimeout(() => {
            Load.loadEnd(this);
            this.$router.go(-1);
          }, 1000);
        } else {
          setTimeout(() => {
            Load.loadEnd(this);
            mui.toast(res.msg);
            return;
          }, 1000);
        }
      });
    },
    confirmL(event) {
      if (event.target.value != this.formData.newpassword) {
        this.rule.conFirmL.validate = false;
        mui.toast(this.rule.conFirmL.msg);
      } else {
        this.rule.conFirmL.validate = true;
      }
    },
    confirmE() {
      var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (!reg.test(this.formData.email)) {
        this.rule.conFirmE.validate = false;
        mui.toast(this.rule.conFirmE.msg);
      } else {
        this.rule.conFirmE.validate = true;
      }
    },
    IsMobilePhoneNumber(event) {
      let regex = /^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/;
      if (event.target.value.match(regex)) {
        this.rule.isMobile.validate = true;
      } else {
        this.rule.isMobile.validate = false;
      }
    },
    // IsIntegerAndEnglishCharacter(input) {
    //   var regex = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
    //   if (event.target.value.match(regex)) {
    //     this.rule.isPwd.validate = true;
    //   } else {
    //     this.rule.isPwd.validate = false;
    //   }
    // },
    IsIntegerAndEnglishCharacter(input) {
      var regex = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
      if (!event.target.value.match(regex)) {
        mui.toast("密码应为6-12位字母+数字");
        // this.rule.isPwd.validate = true;
      }
      // else {
      //   this.rule.isPwd.validate = false;
      // }
    },
    isValidate() {
      if (!Util.formValidate(this.rule) || !Util.filterData(this.formData)) {
        return false;
      } else {
        return true;
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "~link-less";
.body {
  background-color: #fff;
  .tj-form {
    margin-top: 0;
    .form-item {
      .display-flex();
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .item-flex {
        padding: 0 30px;
        flex: 2;
        .btn-origin {
          flex: 1;
          margin: 0;
          background: none;
          color: #406ec3;
          border-left: 1px solid #ccc;
          border-radius: 0;
        }
        & > input {
          flex: 1;
          padding: 0;
          margin: 0;
          background: none;
          color: #000;
          border: none;
        }
      }
      & > label {
        flex: 0.7;
        color: #333;
      }
      & > input {
        flex: 2;
        margin: 0;
        background: none;
        color: #000;
        border: none;
      }
    }
  }
  .btn-submit {
    margin-top: 76px;
    // background: #406ec3;
  }
}

.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style >


